import * as echarts from 'echarts';
import { useEffect } from 'react';

export default ({ container, data, months }: any) => {
  const option = {
    xAxis: {
      type: 'category',
      data: months,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data,
        type: 'line',
      },
    ],
  };

  const init = () => {
    const chartDom = document.getElementById(container);
    console.log('😈chartDom', chartDom);
    if (chartDom) {
      const myChart = echarts.init(chartDom);
      myChart.setOption(option);
    }
  };

  useEffect(() => {
    init();
  }, [container, data, months]);

  return <div id={container} style={{ height: '300px' }}></div>;
};
